$(function () {
    /** 日期选择组件 **/
    Vue.component('ymd',{
        props: ["ymd"],
        data: function() {
            return {
                date: {
                    y: "",
                    m: "",
                    d: ""
                },
                select_y: [],
                select_m: ["1","2","3","4","5","6","7","8","9","10","11","12"],
                display: false
            }
        },
        template: '<div class="field">' +
                    '<label>日期</label>'+
                    '<div class="date">'+
                        '{{ymd}}' +
                        '<span v-on:click="display=true"><i class="calculator icon"></i></span>'+
                        '<div class="date_select"  v-show="display">'+
                            '<div class="show_date">'+
                                 '<div class="ym">'+
                                    '<select v-model="date.y">'+
                                        '<option v-for="item in select_y" value="{{item}}">{{item}}年</option>'+
                                    '</select>'+
                                    '<select v-model="date.m">'+
                                        '<option v-for="item in select_m" value="{{item}}">{{item}}月</option>'+
                                    '</select>'+
                                 '</div>'+
                                '<div class="week">'+
                                    '<div class="item">日</div>'+
                                    '<div class="item">一</div>'+
                                    '<div class="item">二</div>'+
                                    '<div class="item">三</div>'+
                                    '<div class="item">四</div>'+
                                    '<div class="item">五</div>'+
                                    '<div class="item">六</div>'+
                                '</div>'+
                                '<div class="day">'+
                                        '<div v-bind:class="{active:item == date.d,null:item == \'\'}" v-for="item in day" ' +
                                            'track-by="$index" v-on:click="iClick(item)" class="item">{{item}}</div>'+
                                '</div>' +
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>',
        computed: {
            day: function() {
                var self = this;
                var select_d = [];
                var i = 0;
                var Count = new Date(self.date.y,self.date.m ,0).getDate();
                var week = new Date(self.date.y,self.date.m - 1,1).getDay();
                for(; i < week; i++) {
                    select_d.push("");
                }
                for(i = 1; i <= Count; i++) {
                    select_d.push(i);
                }

                i = select_d.length > 35 ?  42 - select_d.length : 35 - select_d.length;
                for(; i > 0; i--) {
                    select_d.push("");
                }
                return select_d;
            }
        },
        ready: function() {
            var date = new Date();
            this.date.y = date.getFullYear();
            this.date.m = date.getMonth() + 1;
            this.date.d = date.getDate();
            for(var i = 0; i < 15; i++){
                this.select_y.push(this.date.y - i);
            }
        },
        methods: {
            iClick: function(item) {
                this.date.d = item;
                this.ymd = this.$root.params.date = this.date.y + "-" +this.date.m + "-" +this.date.d;
                this.display = false;
            }
        }
    });

    new Vue({
        el:"#right",
        data: {
            params: {
                date: "asdas",
                equal: "0",   //日期比较
                photos: [
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                ],
                time: "0"
            },
            rootPath: "http://localhost:3000/"
        },
        methods: {
            save: function() {
                console.log(this.params);
            },
            img_select: function(element){
                $('#'+element).click();
            },
            img_change(e) {
                e = e || window.event;
                var obj = e.target || e.srcElement;
                var imgSize = 0;
                var reader = new FileReader();
                if (this.isIE && !obj.files) {
                    var filePath = obj.value;
                    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                    var file = fileSystem.GetFile(filePath);
                    imgSize = file.Size;
                } else {
                    imgSize = obj.files[0].size;
                }
                if ((imgSize / 1024) > 5000) {
                    alert("附件不能大于5M");
                    obj.value = "";
                    return  false;
                }
                var name = obj.value;
                var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
                if (fileName != "jpg" && fileName != "jpeg" && fileName != "pdf" && fileName != "png" ) {
                    alert("请选择图片格式文件上传(jpg,png,gif,gif等)！");
                    obj.value = "";
                    return
                }
                reader.readAsDataURL(obj.files[0]);
                reader.onload = function (event) {
                    obj.previousElementSibling.querySelector("img").src = reader.result;
                    obj.previousElementSibling.querySelector("div").innerHTML = name;
                };
            },
            img_upload: function(fileElementId) {
                var self = this;
                var count = fileElementId.split("_")[1] - 1;
                if($('#'+fileElementId).val() == ""){
                    alert("上传图片不能为空!!!!");
                    return ;
                }
                $.ajaxFileUpload({
                    url: self.rootPath+'app/img?module=app_start&name=1&type='+(count+1).toString()+'&img_id='
                                    +fileElementId+"&img_url="+self.params.photos[count].photoUrl,
                    secureuri: false,
                    fileElementId: fileElementId,
                    type:'post',
                    success: function(data) {
                        var dataStr = $(data).find("body").text();//获取返回的字符串
                        var dataJson = $.parseJSON(dataStr);//把字符串转化为json对象
                        if(dataJson.status) {
                            self.params.photos[count].photoUrl = dataJson.data.path.replace(/\\/g, "/");
                            $('.imgInfo').eq(count).find(".thumb_img").find("img").attr('src',self.rootPath+self.params.photos[count].photoUrl);
                            $('.imgInfo').eq(count).find(".thumb_img").find("div").text(self.rootPath+self.params.photos[count].photoUrl);
                            $('#'+fileElementId).change(self.img_change);
                            alert("上传成功!!!");
                        } else {
                            alert(dataJson.error);
                        }
                    }
                });
            },
            remove: function(Element) {
                var count = Element.split("_")[1] - 1;
                var self = this;
                var img = $('.imgInfo').eq(count).find(".thumb_img").find("img");
                var div = $('.imgInfo').eq(count).find(".thumb_img").find("div");
                if(img.attr('src').replace(self.rootPath,"") != "../../common/img/favicon.png") {
                    $.ajax({
                        url: self.rootPath+"app/img/delete?img_url="+img.attr('src').replace(self.rootPath,""),
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            alert(data.msg);
                        }
                    });
                    img.attr('src','../../common/img/favicon.png');
                    div.text("无图片");
                    $('#'+Element).val("");
                    self.params.photos[count].photoUrl = "";
                }
            }
        }
    });
});
